<template>
    <!-- <el-tooltip content="复制" placement="bottom"> -->
    <div class="copy-content-container">
        <div class="copy-button" @click="copyContent">
            <i class="el-icon-document-copy"></i>
        </div>
    </div>
</template>

<script>
export default {
    name: 'CopyContent',
    props: {
        content: {
            type: String,
            required: true
        },
        successText: {
            type: String,
            default: '复制成功'
        }
    },
    methods: {
        copyContent() {
            try {
                // 移除HTML标签，获取纯文本
                const tempElement = document.createElement('div')
                tempElement.innerHTML = this.content
                const plainText = tempElement.textContent || tempElement.innerText || ''

                // 复制到剪贴板
                const input = document.createElement('textarea')
                input.value = plainText
                document.body.appendChild(input)
                input.select()
                document.execCommand('copy')
                document.body.removeChild(input)

                // 显示成功消息
                this.$message.success(this.successText)

                // 触发事件
                this.$emit('copy-success', plainText)
            } catch (error) {
                console.error('复制内容失败:', error)
                this.$message.error('复制失败，请重试')
                this.$emit('copy-error', error)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.copy-content-container {
    display: inline-block;
}

.copy-button {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease;

    i {
        font-size: 16px;
        color: #8a8a8a;
        transition: all 0.3s ease;
    }

    &:hover {
        color: var(--primary, #409EFF);

        i {
            color: var(--primary, #409EFF);
        }
    }
}

/* 暗黑模式适配 */
@media (prefers-color-scheme: dark) {
    .copy-button:hover {
        color: #1890ff;
    }
}

/* 自定义暗黑模式类 */
.dark-mode {
    .copy-button:hover {
        color: #1890ff;
    }
}
</style>